<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<script>
    function selectById(value) {
        $.ajax({
            type: "GET",
            url: "/teacher",
            data: "id=" + value,
            success: function (json) {
                let parse = JSON.parse(json);
                $("#city").empty();
                for (let i = 0; i < parse.teacherCity.length; i++) {
                    var str = "<option value=" + parse.teacherCity[i].id + " onclick='selectById(this.value)' >" +parse.teacherCity[i].city + "</option>";
                    $("#city").append(str);
                }
            },
            error: function () {
                alert("失败")
            },
            contentType: "application/json;charset=utf-8"
        })
    }

</script>

<select multiple="multiple">
    <option value="1" onclick="selectById(this.value)">河北省</option>
    <option value="2" onclick="selectById(this.value)">广东省</option>
    <option value="3" onclick="selectById(this.value)">湖南省</option>
</select>


<select id="city" multiple="multiple">

</select>

</body>
</html>
